<template>
  <a-card :bordered="false">
    <div class="content">
        <div class="left">
           <div>
            <a-input-search style="margin-bottom: 8px" placeholder="按设备名称查询" @change="onChange" />
            <a-tree
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :tree-data="gData"
              @expand="onExpand"
            >
              <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{ title.substr(0, title.indexOf(searchValue)) }}
                  <span style="color: #f50">{{ searchValue }}</span>
                  {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ title }}</span>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="middle">
          <minddle></minddle>
        </div>
        <div class="right">
          <spte></spte>
        </div>
    </div>
  </a-card>
</template>

<script>
import spte from "./step.vue"
import minddle from "./minddle"
export default {
  name: 'equipment',
  components:{spte,minddle},
  data() {
    return {
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      gData:[
        {
          title: 'TCL惠州工厂',
          key: '0',
          children: [
            {
              title: '车间1',
              key: '1',
              children: [
                    {
                    title: '线1',
                    key: '1',
                    children: [
                            {
                            title: '线体',
                            key: '1',
                            },
                            {
                            title: '自动OC机',
                            key: '2',
                            },
                            {
                            title: '立直机',
                            key: '3',
                            },
                        ],
                    },
                    {
                    title: '线2',
                    key: '2',
                    },
                    {
                    title: '线3',
                    key: '3',
                    },
                ],
            },
            {
              title: '车间2',
              key: '2',
            },
            {
              title: '车间3',
              key: '3',
            },
          ],
        },
      ],
    };
  },
  methods: {
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onChange(e) {
      const value = e.target.value;
      const expandedKeys = dataList
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, gData);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
  .content{
    min-height: 700px;
    display: flex;
    flex-direction: row;
    .left{
     width: 400px;
     margin-right:20px;
     padding:10px;
     background-color: #F1F2F3;
    }
    .middle{
     width: 700px;
     padding:10px;
    }
    .right{
     width: 100%;
     padding:10px;
    }
  }
</style>
